<template>
	<div class="page home ">
		<div class="top">
			<div class="card-container animate__animated animate__bounceIn">
				<div class="card">
					<div class="title">
						图书信息统计
					</div>
					<div class="main" id="bookInfoChart"></div>
				</div>
			</div>
			<div class="card-container animate__animated animate__bounceIn">
				<div class="card">
					<div class="title">
						借阅信息统计
					</div>
					<div class="main" id="borrowingInfoChart"></div>
				</div>
			</div>			
		</div>
		<div class="bottom">
			<div class="card-container animate__animated animate__bounceIn">
				<div class="card">
					<div class="title">
						类型借阅TOP
					</div>
					<div class="main"  id="categoryBorrowingTop"></div>
				</div>
			</div>
			<div class="card-container animate__animated animate__bounceIn">
				<div class="card">
					<div class="title">
						书籍借阅TOP
					</div>
					<div class="main" id="bookBorrowingTop"></div>
				</div>
			</div>
			<div class="card-container animate__animated animate__bounceIn">
				<div class="card">
					<div class="title">
						借阅人TOP
					</div>
					<div class="main" id="personBorrowingTop"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
import elementResizeDetectorMaker from 'element-resize-detector'
let erd = elementResizeDetectorMaker() //创建实例
import {
	sisBookInfoDatas,
	sisBorrowingInfoDatas,
	sisCategoryBorrowingDatas,
	sisBookBorrowingDatas,
	sisUserBookBorrowingDatas
} from '@/http/apis/bookInfoSis'
// 图书信息数据
const bookInfoDatas = ref([
	{
		num: 1048,
		name: '历史类'
	},
	{
		num: 1048,
		name: '经济类'
	},
	{
		num: 1048,
		name: '理工类'
	},
	{
		num: 1048,
		name: '科普类'
	},
	{
		num: 1048,
		name: '文学类'
	},
	{
		num: 1048,
		name: '数学类'
	},
	{
		num: 1048,
		name: '其他类'
	}
]);
// 借阅信息数据
const borrowingInfoDatas = ref([
	{
		type: '历史类',
		borrowing: 123,
		noBorrowing: 121,
	},
	{
		type: '经济类',
		borrowing: 123,
		noBorrowing: 121,
	},
	{
		type: '理工类',
		borrowing: 123,
		noBorrowing: 121,
	},
	{
		type: '科普类',
		borrowing: 123,
		noBorrowing: 121,
	},
	{
		type: '文学类',
		borrowing: 123,
		noBorrowing: 121,
	},
	{
		type: '数学类',
		borrowing: 123,
		noBorrowing: 121,
	},
	{
		type: '其他类',
		borrowing: 123,
		noBorrowing: 121,
	}
]);
// 类型借阅TOP
const categoryBorrowingDatas = ref([
	{
		type: '历史类',
		num: 1048,
	},
	{
		type: '经济类',
		num: 1043,
	},
	{
		type: '理工类',
		num: 1032,
	},
	{
		type: '科普类',
		num: 1028,
	},
	{
		type: '文学类',
		num: 1011,
	},
	{
		type: '文学类',
		num: 998,
	},
	{
		type: '文学类',
		num: 878,
	},
	{
		type: '文学类',
		num: 675,
	},
	{
		type: '文学类',
		num: 565,
	},
	{
		type: '文学类',
		num: 322,
	}
]);
// 书籍借阅TOP
const bookBorrowingDatas = ref([
	{
		type: 'JAVA基础',
		num: 1048,
	},
	{
		type: '计算机原理',
		num: 1043,
	},
	{
		type: 'HTML基础',
		num: 1032,
	},
	{
		type: 'CSS基础',
		num: 1028,
	},
	{
		type: 'JavaScript基础',
		num: 1011,
	},
	{
		type: 'Vue基础',
		num: 998,
	},
	{
		type: '傲慢与偏见',
		num: 878,
	},
	{
		type: '红与黑',
		num: 675,
	},
	{
		type: '罗密欧与朱丽叶',
		num: 565,
	},
	{
		type: '红楼梦',
		num: 322,
	}
]);
// 人员借阅TOP
const personBorrowingDatas = ref([
	{
		type: '张三',
		num: 1048,
	},
	{
		type: 'lis',
		num: 1043,
	},
	{
		type: 'HTML基础',
		num: 1032,
	},
	{
		type: 'CSS基础',
		num: 1028,
	},
	{
		type: 'JavaScript基础',
		num: 1011,
	},
	{
		type: 'Vue基础',
		num: 998,
	},
	{
		type: '傲慢与偏见',
		num: 878,
	},
	{
		type: '红与黑',
		num: 675,
	},
	{
		type: '罗密欧与朱丽叶',
		num: 565,
	},
	{
		type: '红楼梦',
		num: 322,
	}
]);
// 查询图书信息数据
const featchBookInfoDatas = async () => {
	let res = await sisBookInfoDatas({})
	if (res && res.code === 0) { 
		bookInfoDatas.value = res.data
	} else {
		bookInfoDatas.value = []
	}
	drawBookInfoChart();
};
// 查询借阅信息数据
const featchBorrowingInfoDatas = async () => {
	let res = await sisBorrowingInfoDatas({})
	if (res && res.code === 0) { 
		borrowingInfoDatas.value = res.data
	} else {
		borrowingInfoDatas.value = []
	}
	drawBorrowingInfoChart();
};
// 查询借阅分类TOP数据
const featchCategoryBorrowingDatas = async () => {
	let res = await sisCategoryBorrowingDatas({})
	if (res && res.code === 0) { 
		categoryBorrowingDatas.value = res.data
	} else {
		categoryBorrowingDatas.value = []
	}
	drawTypeBorrowingChart();
};
// 查询借阅书籍TOP数据
const featchBookBorrowingDatas = async () => {
	let res = await sisBookBorrowingDatas({})
	if (res && res.code === 0) { 
		bookBorrowingDatas.value = res.data
	} else {
		bookBorrowingDatas.value = []
	}
	drawBookBorrowingChart();
};
// 查询借阅人TOP数据
const featchUserBookBorrowingDatas = async () => {
	let res = await sisUserBookBorrowingDatas({})
	if (res && res.code === 0) { 
		personBorrowingDatas.value = res.data
		personBorrowingDatas.value.forEach((item, index) => {
			item.num = index + 1
		})
	} else {
		personBorrowingDatas.value = []
	}
	drawBorrowerBorrowingChart();
}
// 获取亮色柔和色的方法
const getSoftColors = (count) => {
	const colors = [];
	for (let i = 0; i < count; i++) {
		// 生成柔和的颜色：使用较高的亮度值和适中的饱和度
		const hue = Math.random() * 360; // 随机色相 (0-360)
		const saturation = 30 + Math.random() * 40; // 饱和度 30-70%
		const lightness = 70 + Math.random() * 20; // 亮度 70-90%
		
		// 将 HSL 转换为十六进制颜色
		const color = hslToHex(hue, saturation, lightness);
		colors.push(color);
	}
	
	return colors;
};

// HSL 转十六进制颜色
const hslToHex = (h, s, l) => {
	s /= 100;
	l /= 100;
	
	const c = (1 - Math.abs(2 * l - 1)) * s;
	const x = c * (1 - Math.abs((h / 60) % 2 - 1));
	const m = l - c / 2;
	let r = 0, g = 0, b = 0;
	
	if (0 <= h && h < 60) {
		r = c; g = x; b = 0;
	} else if (60 <= h && h < 120) {
		r = x; g = c; b = 0;
	} else if (120 <= h && h < 180) {
		r = 0; g = c; b = x;
	} else if (180 <= h && h < 240) {
		r = 0; g = x; b = c;
	} else if (240 <= h && h < 300) {
		r = x; g = 0; b = c;
	} else if (300 <= h && h < 360) {
		r = c; g = 0; b = x;
	}
	
	const rHex = Math.round((r + m) * 255).toString(16).padStart(2, '0');
	const gHex = Math.round((g + m) * 255).toString(16).padStart(2, '0');
	const bHex = Math.round((b + m) * 255).toString(16).padStart(2, '0');
	
	return `#${rHex}${gHex}${bHex}`;
};

// 绘制图书信息图表
const drawBookInfoChart = () => {
	const chartDom = document.getElementById('bookInfoChart');
	const myChart = echarts.init(chartDom);
	// 重新组装数据
	const chartData = bookInfoDatas.value.map(item => ({
		name: item.name,
		value: item.num
	}));
	// 获取颜色
	const colors = getSoftColors(chartData.length);
	const option = {
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b}: {c} ({d}%)'
		},
		legend: {
			orient: 'vertical',
			right: '15%',
			top: 'center',
			itemGap: 10,
			itemWidth: 24,
			itemHeight: 16,
			textStyle: {
				fontSize: 12
			}
		},
		series: [
			{
				name: '图书分类',
				type: 'pie',
				radius: ['40%', '70%'],
				center: ['40%', '50%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 2
				},
				label: {
					show: true,
					position: 'outside',
					formatter: '{b}\n{c}本 ({d}%)',
					color: '#444444',
					fontSize: 12,
					lineHeight: 18
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '12',
						fontWeight: 'bold',
						color: '#222222',
						formatter: '{b}\n{c}本 ({d}%)',
						lineHeight: 18
					}
				},
				labelLine: {
					show: false
				},
				data: chartData,
				color: colors
			}
		]
	};
	myChart.setOption(option);
	//监听id为box的元素
	erd.listenTo(document.getElementById('bookInfoChart'), async () => {
		myChart.resize()
    })
};
// 绘制借阅信息图表
const drawBorrowingInfoChart = () => {
	const chartDom = document.getElementById('borrowingInfoChart');
	const myChart = echarts.init(chartDom);
	
	// 重新处理数据
	const categories = borrowingInfoDatas.value.map(item => item.type);
	const borrowingData = borrowingInfoDatas.value.map(item => item.borrowing);
	const noBorrowingData = borrowingInfoDatas.value.map(item => item.noBorrowing);
	
	// 获取颜色
	const colors = getSoftColors(2);
	
	const option = {
		grid: {
			top: 50,
			right: 10,
			bottom: 10,
			left: 30,
			containLabel: true
		},
		dataZoom: [
			{
				type: 'inside',
				start: 0,
				end: 100,
				show: false
			},
			{
				type: 'slider',
				start: 0,
				end: 100,
				show: false
			}
		],
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			data: ['已借阅', '未借阅'],
			top: 10,
			right: 10,
			itemWidth: 24,
			itemHeight: 16,
			textStyle: {
				fontSize: 12
			}
		},
		xAxis: {
			type: 'category',
			data: categories,
			axisLine: {
				lineStyle: {
					color: '#e0e0e0'
				}
			},
			axisTick: {
				lineStyle: {
					color: '#e0e0e0'
				}
			},
			axisLabel: {
				color: '#666666',
				fontSize: 12
			}
		},
		yAxis: {
			type: 'value',
			axisLine: {
				lineStyle: {
					color: '#e0e0e0'
				}
			},
			axisTick: {
				lineStyle: {
					color: '#e0e0e0'
				}
			},
			splitLine: {
				lineStyle: {
					color: '#f0f0f0'
				}
			},
			axisLabel: {
				color: '#666666',
				fontSize: 12
			}
		},
		series: [
			{
				name: '已借阅',
				type: 'bar',
				data: borrowingData,
				itemStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{ offset: 0, color: colors[0] },
							{ offset: 1, color: colors[0] + '40' }
						]
					},
					borderRadius: [50, 50, 0, 0]
				},
				barWidth: '20%'
			},
			{
				name: '未借阅',
				type: 'bar',
				data: noBorrowingData,
				itemStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{ offset: 0, color: colors[1] },
							{ offset: 1, color: colors[1] + '40' }
						]
					},
					borderRadius: [50, 50, 0, 0]
				},
				barWidth: '20%'
			}
		]
	};
	
	myChart.setOption(option);
	
	// 监听元素大小变化
	erd.listenTo(document.getElementById('borrowingInfoChart'), async () => {
		myChart.resize()
	})
};
// 通用横向柱状图绘制函数
const drawHorizontalBarChart = (chartId, data, key) => {
	const chartDom = document.getElementById(chartId);
	const myChart = echarts.init(chartDom);
	// 重新处理数据
	const sortedData = data
		.map(item => ({ label: item[key], num: item.num }))
		.sort((a, b) => b.num - a.num);
	const categories = sortedData.map(item => item.label).reverse();
	const chartData = sortedData.map(item => item.num).reverse();
	
	// 获取颜色
	const colors = getSoftColors(chartData.length);
	
	const option = {
		grid: {
			top: 10,
			right: 30,
			bottom: 10,
			left: 20,
			containLabel: true
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		xAxis: {
			type: 'value',
			show: false,
			axisLine: {
				lineStyle: {
					color: '#e0e0e0'
				}
			},
			axisTick: {
				lineStyle: {
					color: '#e0e0e0'
				}
			},
			splitLine: {
				lineStyle: {
					color: '#f0f0f0'
				}
			},
			axisLabel: {
				color: '#666666',
				fontSize: 12
			}
		},
		yAxis: {
			type: 'category',
			data: categories,
			axisLine: {
				lineStyle: {
					color: '#e0e0e0'
				}
			},
			axisTick: {
				lineStyle: {
					color: '#e0e0e0'
				}
			},
			axisLabel: {
				color: '#666666',
				fontSize: 12
			}
		},
		series: [
			{
				type: 'bar',
				data: chartData.map((value, index) => ({
					value: value,
					itemStyle: {
						color: colors[index],
						borderRadius: [0, 4, 4, 0]
					}
				})),
				barWidth: '40%',
				label: {
					show: true,
					position: 'right',
					color: '#444444',
					fontSize: 12
				}
			}
		]
	};
	
	myChart.setOption(option);
	
	// 监听元素大小变化
	erd.listenTo(document.getElementById(chartId), async () => {
		myChart.resize()
	})
};
// 绘制类型借阅TOP
const drawTypeBorrowingChart = () => { 
	drawHorizontalBarChart('categoryBorrowingTop', categoryBorrowingDatas.value, 'type');
};
// 绘制图书借阅TOP
const drawBookBorrowingChart = () => { 
	drawHorizontalBarChart('bookBorrowingTop', bookBorrowingDatas.value, 'name');
};
// 绘制借阅人借TOP
const drawBorrowerBorrowingChart = () => { 
	drawHorizontalBarChart('personBorrowingTop', personBorrowingDatas.value, 'borrower');
};
// 组件挂载后初始化图表
onMounted(() => {
	featchBookInfoDatas()
	featchBorrowingInfoDatas()
	featchBookBorrowingDatas()
	featchCategoryBorrowingDatas()
	featchUserBookBorrowingDatas();
});

</script>
<style lang="scss" scoped>
	.home{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0;
		background: transparent;
		>div{
			width: 100%;
			height: 50%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.card-container{
			    padding: 10px;
				.card{
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					box-shadow: 1px 2px 20px 0 #c7c7c7;
					border-radius: 10px;
					background: #fff;
					.title{
						width: 100%;
						padding: 10px 40px;
						position: relative;
						border-bottom: solid 1px #efefef;
						&::after{
							content: '';
							position: absolute;
							width: 5px;
							height: 60%;
							background: #409EFF;
							left: 20px;
							bottom: 20%;
						}
					}
					.main{
						flex: 1;
					}
				}
			}
		}
		.top{
			.card-container{
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				
			}
		}
		.bottom{
			.card-container{width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>